<template>
    <div class="addbook" style="margin-top:20px; height:500px; width:auto; overflow:scroll">
        <div>
            <Row class="row">
                <Col span="3">
                    <span>书籍所有者:</span>
                </Col>
                <Col span="4">
                    <Input disabled v-model="owner"></Input>
                </Col>
            </Row>
            <divider></divider>
            <Row class="row">
                <Col span="3">
                    <span>书籍名:</span>
                </Col>
                <Col span="6">
                    <Input v-model="bookname" placeholder="书籍名"></Input>
                </Col>
            </Row>
            <divider></divider>
            <Row class="row">
                <Col span="3">
                    <span>书籍作者:</span>
                </Col>
                <Col span="6">
                    <Input v-model="writer" placeholder="书籍作者"></Input>
                </Col>
            </Row>
            <divider></divider>
            <Row class="row">
                <Col span="3">
                    <span>书籍简介:</span>
                </Col>
                <Col span="8">
                    <Input type="textarea" :rows="4" v-model="introduction" placeholder="书籍简介"></Input>
                </Col>
            </Row>
            <divider></divider>
            <Row style="text-align: center">
                <img :src="uploadImg" style="width: 20%">
                <Upload
                    :before-upload="handleUpload"
                    action="//jsonplaceholder.typicode.com/posts/">
                    <Button icon="ios-cloud-upload-outline">上传书籍图片</Button>
                </Upload>
            </Row>
            <divider></divider>
            <Row class="row">
                <Col span="4">
                    <Button type="success" @click="submit">提交</Button>
                </Col>
                <Col span="4">
                    <Button type="error" @click="blank">重置</Button>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
export default {
    name: 'addbook',
    data() {
        return {
            loadingStatus: false,
            owner: '',
            bookname: '',
            writer: '',
            introduction: '',
            uploadImg: '',
            bookUrl: '',
        }
    },
    created() {
        // fetch('http://localhost:5000/getmyname', {
        //     method: 'post',
        //     body: JSON.stringify({
        //         username: this.username,
        //     }),
        //     headers: { 'Content-Type': 'application/json' },
        // }).then(
        //     (res) => res.json()
        // ).then(
        //     (res) => {
        //         this.username = res.data.username
        //     }
        // )
        this.owner = localStorage.getItem('userName')
    },
    methods: {
        submit() {
            if (this.bookname != '') {
                fetch('http://localhost:5000/addbook', {
                    method: 'post',
                    body: JSON.stringify({
                        owner: this.owner,
                        bookname: this.bookname,
                        writer: this.writer,
                        introduction: this.introduction,
                        bookUrl: this.bookUrl,
                    }),
                    headers: { 'Content-Type': 'application/json' },
                }).then(
                    (res) => res.json()
                ).then(
                    (res) => {
                        console.log(res)
                        alert('增加成功！')
                    }
                )
            } else {
                alert('书籍名不能为空！')
            }
        },
        blank() {
            this.bookname = ''
            this.writer = ''
            this.introduction = ''
        },
        handleUpload(file) {
            this.uploadImg = require('../assets/books/' + file.name)
            this.bookUrl = file.name
            alert(this.bookUrl)
            return false
        },
    },
}
</script>

<style scoped>

</style>
